<template>
	<div class="showBox">
		<img class="bgimg" :src="info[idx].ofansdetails.bgimg" alt="" />
		<div class="container">
			<router-link :to="{path:'/circleComment'}">
				<div class="backBtn"><</div>
			</router-link>
			<div class="imgbox">
				<img src="../../../../../static/assets/images/circle/17/sx-1.png" alt="" />
			</div>
			<div class="touxiang">
				<img :src="info[idx].ofansdetails.touxiang" alt="" />
			</div>
			<div class="ofansname">{{ info[idx].ofansdetails.ofansname }}</div>
			<div class="ofansid">ID:{{ info[idx].ofansdetails.ofansid }}</div>
			<div class="qianming">个性签名:{{ info[idx].ofansdetails.qianming }}</div>
			<div>
				<div class="navbottom">
					<span class="left">
						<p class="carenum" >{{ info[idx].ofansdetails.carenum }}</p>
						<p class="second">关注</p>
					</span>
					<span class="middle">
						<p class="ofansnum">{{ info[idx].ofansdetails.ofansnumber }}</p>
						<p class="second">粉丝</p>
					</span>
					<span class="right">
						<p>已关注</p>
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			'info': {
				type: Array				
			},
			'idx': Number
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.showBox {
		width: 100%;
		height: 580/@current;
		position: relative;
		color: white;
		.bgimg {
			position: absolute;
			filter: blur(10px);
			width: 100%;
			height: 580/@current;
		}
		.container {
			position: absolute;
			z-index: 2;
			width: 100%;
			height: 650/@current;
			.backBtn {
				position: absolute;
				color: white;
				font-size: 50/@current;
				top: 68/@current;
				left: 49/@current;
			}
			.imgbox {
				width: 40/@current;
				height: 25/@current;
				position: absolute;
				right: 49/@current;
				top: 12/@current;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.touxiang {
				width: 180/@current;
				height: 180/@current;
				border: 5/@current solid white;
				border-radius: 50%;
				margin: 130/@current auto;
				margin-bottom: 16/@current;
				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.ofansname {
				font-size: 30/@current;
				text-align: center;
			}
			.ofansid {
				font-size: 24/@current;
				text-align: center;
				margin-top: 14/@current;
				color: rgba(255, 255, 255, .6);
			}
			.qianming {
				font-size: 26/@current;
				margin-top: 32/@current;
				color: rgba(255, 255, 255, .6);
				padding: 0 49/@current;
				margin-bottom: 44/@current;
			}
			.navbottom {
				padding: 30/@current 0;
				font-size: 32/@current;
				background-color: rgba(0, 0, 0, .2);
				.left {
					display: inline-block;
					width: 33%;
					text-align: center;
					.second {
						font-size: 26/@current;
					}
				}
				.middle {
					display: inline-block;
					width: 30%;
					border-left: 4/@current solid rgba(0, 0, 0, .1);
					border-right: 4/@current solid rgba(0, 0, 0, .1);
					box-sizing: border-box;
					text-align: center;
					.second {
						font-size: 26/@current;
					}
				}
				.right {
					display: inline-block;
					width: 33%;
					text-align: center;
					color: rgba(255, 255, 255, .6);
					font-size: 30/@current;
					position: relative;
					p {
						position: absolute;
						top: -50/@current;
						left: 60/@current;
					}
				}
			}
		}
	}
</style>